<template>
	<!-- 登录页面根容器 -->
	<view class="login-page">
		<!-- 登录核心内容容器：居中布局，包含logo、标题、按钮等 -->
		<view class="login-container">
			<!-- Logo容器：圆形白色背景+图标，增强视觉识别 -->
			<view class="logo-wrapper">
				<!-- 使用uni-app内置图标组件，类型为"contact"（联系人图标），绿色系匹配登录按钮 -->
				<uni-icons type="contact" size="80" color="#07c160" class="logo-icon"></uni-icons>
			</view>

			<!-- 标题组：主标题+副标题，明确登录目的和意义 -->
			<view class="title-group">
				<view class="main-title">绑定手机号登录</view>
				<view class="sub-title">绑定后可使用完整服务功能</view>
			</view>

			<!-- 登录按钮：微信小程序手机号一键登录按钮 -->
			<!-- disabled：是否禁用（未同意协议时禁用）；open-type="getPhoneNumber"：触发微信获取手机号能力 -->
			<button class="login-btn" :disabled="!isAgree" open-type="getPhoneNumber"
				@getphonenumber="handleGetPhoneNumber">
				<view class="btn-content">
					<!-- 手机号图标：增强按钮视觉识别度 -->
					<uni-icons type="phone" size="22" color="#fff" class="phone-icon"></uni-icons>
					<view>手机号一键登录</view>
				</view>
			</button>

			<!-- 协议勾选区域：用户必须同意协议才能登录 -->
			<view class="agreement-check">
				<!-- 勾选图标：根据isAgree状态切换"未勾选/已勾选"样式 -->
				<uni-icons class="check-icon" :type="isAgree ? 'checkbox-filled' : 'checkbox'"
					:color="isAgree ? '#07c160' : '#ccc'" @click="toggleAgree"></uni-icons>
				<view class="agreement-text">
					我已阅读并同意
					<!-- 服务协议链接：点击跳转协议详情页，携带type参数区分协议类型 -->
					<view class="link" @click="navigateToAgreement('service')">《用户服务协议》</view>
					和
					<!-- 隐私政策链接：同上 -->
					<view class="link" @click="navigateToAgreement('privacy')">《隐私政策》</view>
				</view>
			</view>
		</view>

		<!-- 页脚区域：版权信息 -->
		<view class="footer">
			<text class="copyright"> 2025黄冈科技职业学院版权所有</text>
		</view>
	</view>
</template>

<script setup>
	// 导入Vue的ref函数，用于创建响应式变量
	import { ref } from 'vue'
	// 导入用户登录接口函数（从base.js服务文件中引入）
	import { userLogin } from '@/services/base.js'

	// 响应式变量：协议同意状态（默认未同意，控制登录按钮禁用状态）
	const isAgree = ref(false)
	// 响应式变量：登录成功后的重定向地址（默认跳首页）
	const redirectUrl = ref('/pages/index/index')

	/**
	 * 切换协议同意状态
	 * 点击勾选图标时触发，反转isAgree的值
	 */
	const toggleAgree = () => {
		isAgree.value = !isAgree.value
	}

	/**
	 * 跳转到协议详情页
	 * @param {string} type - 协议类型（'service'=用户服务协议，'privacy'=隐私政策）
	 * 通过uni.navigateTo实现页面跳转，并携带type参数区分展示不同协议
	 */
	const navigateToAgreement = (type) => {
		uni.navigateTo({
			url: `/pages/login/agreement?type=${type}` // 拼接参数到URL
		})
	}

	/**
	 * 处理微信获取手机号事件（核心登录逻辑）
	 * @param {Object} e - 微信返回的事件对象，包含手机号加密信息
	 * 流程：1. 校验协议同意状态 → 2. 校验微信授权结果 → 3. 调用微信登录获取code → 4. 调用后端登录接口 → 5. 存储用户信息并跳转
	 */
	const handleGetPhoneNumber = async (e) => {
		// 1. 未同意协议：提示用户并终止流程
		if (!isAgree.value) {
			uni.showToast({
				title: '请先同意用户协议和隐私政策',
				icon: 'none' // 不显示默认图标（仅文字提示）
			})
			return
		}

		// 打印微信返回的事件数据（调试用，查看加密信息）
		console.log(e, 'phone')

		// 2. 微信授权失败（用户拒绝提供手机号）：提示用户并终止流程
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			uni.showToast({
				title: '请允许获取手机号以完成登录',
				icon: 'none'
			})
			return
		}

		try {
			// 3. 调用微信登录接口，获取用户的openIdCode（用于后端关联微信账号）
			uni.login({
				provider: 'weixin', // 指定登录方式为微信
				async success(loginData) {
					// 4. 调用后端登录接口：传入微信code和手机号加密code
					const user = await userLogin({
						openIdCode: loginData.code, // 微信登录返回的code（用于换openId）
						phoneCode: e.detail.code    // 手机号加密code（后端需解密获取手机号）
					})

					// 5. 登录成功（后端返回200状态码）：存储用户信息并跳首页
					if (user.code == 200) {
						// 解构用户数据：分离token和其他用户配置
						const { token, ...userConfig } = user.data
						// 存储用户配置到本地缓存（如昵称、头像等）
						uni.setStorageSync('userConfig', userConfig)
						// 存储登录令牌token到本地缓存（后续接口请求需携带）
						uni.setStorageSync('token', token)
						// 重定向到首页（uni.reLaunch：关闭所有页面，打开新页面，避免返回登录页）
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} 
					// 登录失败（后端返回非200状态码）：提示重试
					else {
						// 注：此处原代码为uni.showTabBar，应为笔误，修正为uni.showToast（TabBar是底部导航，showTabBar是显示导航，非提示）
						uni.showToast({
							title: '登录失败请重试!',
							icon: 'none'
						})
					}
				},
				// 微信登录接口调用失败（如网络问题）：提示用户
				fail() {
					uni.showToast({
						title: '手机号登录失败，请重试!',
						icon: 'none'
					})
				}
			})
		} 
		// 捕获整个流程中的异常（如接口调用报错、代码错误）
		catch (err) {
			uni.showToast({
				title: '网络错误，请稍后重试,', // 注：此处多了一个逗号，实际使用时建议修正为"网络错误，请稍后重试"
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面根样式：全屏高度，浅灰背景，垂直布局 */
	.login-page {
		min-height: 100vh; /* 确保页面占满屏幕高度 */
		background-color: #f7f9fa; /* 柔和的浅灰背景，减少视觉疲劳 */
		padding: 0 40rpx; /* 左右内边距，避免内容贴边 */
		display: flex;
		flex-direction: column; /* 子元素垂直排列 */
		position: relative;
		overflow: hidden; /* 隐藏溢出内容 */
	}

	/* 登录核心内容容器：居中布局，占满剩余高度 */
	.login-container {
		flex: 1; /* 占据父容器剩余高度，实现内容垂直居中 */
		display: flex;
		flex-direction: column;
		justify-content: center; /* 垂直居中 */
		align-items: center; /* 水平居中 */
		gap: 60rpx; /* 子元素之间的间距 */
		padding-top: 120rpx; /* 顶部内边距，调整内容位置 */
		position: relative;
		z-index: 2; /* 确保内容在最上层，不被其他元素遮挡 */

		/* Logo容器：圆形白色背景+阴影，增强立体感 */
		.logo-wrapper {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%; /* 圆形 */
			background-color: #fff; /* 白色背景 */
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.15); /* 浅绿色阴影，匹配主题色 */
			margin-bottom: 40rpx; /* 与下方标题间距 */
		}
	}

	/* 标题组样式：文本居中，区分主次标题 */
	.title-group {
		text-align: center; /* 文本居中 */
		margin-bottom: 20rpx;

		/* 主标题：大字体、加粗，突出核心信息 */
		.main-title {
			font-size: 38rpx;
			font-weight: 600;
			color: #1a1a1a; /* 深黑色，增强对比度 */
			margin-bottom: 16rpx;
			letter-spacing: 1rpx; /* 字间距，提升可读性 */
		}

		/* 副标题：小字体、灰色，补充说明 */
		.sub-title {
			font-size: 26rpx;
			color: #666; /* 中灰色，不抢主标题风头 */
			line-height: 1.5; /* 行高，优化多行显示 */
			margin: 0 auto;
		}
	}

	/* 登录按钮样式：绿色主题，hover/禁用状态区分 */
	.login-btn {
		width: 100%; /* 占满父容器宽度 */
		height: 96rpx;
		border-radius: 48rpx; /* 大圆角，柔和风格 */
		background-color: #07c160; /* 主题绿色 */
		color: #fff; /* 白色文字 */
		border: none; /* 去掉默认边框 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.25); /* 绿色阴影，增强立体感 */
		transition: all 0.3s ease; /* 过渡动画，提升交互体验 */
		margin-top: 20rpx;

		/* 按钮按下状态：深色背景、轻微缩放、浅阴影 */
		&:active {
			background-color: #06b358; /* 深一点的绿色 */
			transform: scale(0.98); /* 轻微缩小，模拟按压感 */
			box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2); /* 浅阴影 */
		}

		/* 按钮禁用状态：浅绿背景、灰色文字、无阴影 */
		&[disabled] {
			background-color: #e8f5e9; /* 非常浅的绿色 */
			color: #a5d6a7; /* 浅灰色文字 */
			box-shadow: none; /* 去掉阴影 */
		}

		/* 按钮内部内容：图标+文字横向排列 */
		.btn-content {
			display: flex;
			align-items: center;

			/* 手机号图标：与文字间距 */
			.phone-icon {
				margin-right: 15rpx;
			}
		}
	}

	/* 协议勾选区域样式：横向排列，链接文字特殊处理 */
	.agreement-check {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx; /* 图标与文字间距 */
		font-size: 24rpx;
		color: #888; /* 浅灰色文字 */
		margin-top: 40rpx;
		line-height: 1.4; /* 行高，优化多行显示 */
		padding: 0 20rpx; /* 左右内边距，避免文字贴边 */

		/* 勾选图标：鼠标悬浮变指针，提示可点击 */
		.check-icon {
			font-size: 28rpx;
			cursor: pointer;
			transition: color 0.2s ease; /* 颜色过渡，提升交互感 */
		}

		/* 协议链接文字：绿色、下划线， hover变深绿 */
		.link {
			color: #07c160; /* 主题绿色 */
			text-decoration: underline; /* 下划线，提示可点击 */
			padding: 0 4rpx; /* 上下内边距，扩大点击区域 */
			cursor: pointer;
			display: inline; /* 行内显示，不换行 */
			transition: color 0.2s ease;

			/*  hover状态：深一点的绿色 */
			&:hover {
				color: #06b358;
			}
		}
	}

	/* 页脚样式：版权信息居中，浅灰色小字体 */
	.footer {
		padding: 30rpx 0; /* 上下内边距，控制高度 */
		text-align: center; /* 文本居中 */
		position: relative;
		z-index: 2;

		.copyright {
			font-size: 22rpx;
			color: #aaa; /* 浅灰色，不抢内容风头 */
		}
	}
</style>